<template>
	<view class="container">
		<view class="ident flex--col">
			<view class="ident--heading primary-heading--main">
				<text>认证，</text><br/>
				<text>加入我们的第一步。</text>
			</view>
			
			<view class="line"></view>
			
			<view class="ident--role">
				<view class="role--icon-group ">
					<template v-if="formData.role === ROLE_VOLUNTEER">
						<image aria-label="不选择盲人" class="icon--large" src="@/static/role/blindOff.svg" ></image>
						<image aria-label="选择志愿者" class="icon--large" src="@/static/role/volunteerOn.svg" ></image>
					</template>
					<template v-else>
						<image aria-label="选择盲人" class="icon--large"  src="@/static/role/blindOn.svg" ></image>
						<image aria-label="不选择志愿者" class="icon--large"  src="@/static/role/volunteerOff.svg" ></image>
					</template>
				</view>
				<view class="role--text-group flex--row">
					<view 
					class="role--text" 
					:class="{'role--text__active-left':formData.role === ROLE_BLIND}"
					@click="formData.role=ROLE_BLIND"
					role="button"
					aria-label="选择盲人身份">
						盲人
					</view>
					<view class="role--text"
					:class="{'role--text__active-right': formData.role === ROLE_VOLUNTEER}"
					 @click="formData.role=ROLE_VOLUNTEER"
					 role="button"
					 aria-label="选择志愿者身份">
						志愿者
					</view>
				</view>
			</view>
			
			<view class="ident--form" v-if="role === ROLE_UNDEFINED">
				<view class="form--heading">
					<view class="secondary-heading--main">
						认证表单
					</view>
					<view class="form--attention flex--row flex--align-center">
						<image aria-label="警告" src="@/static/attentionOn.svg" class="icon" ></image>
						<text>一个账号只能认证一次，且认证后不能撤销。</text>
					</view>
				</view>
				<view class="form--main flex--col flex--gap-20">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
							<uni-forms-item name="name">
								<view class="form--label third-heading--main">姓名</view>
								<input type="text" v-model="formData.name" class="form--input" placeholder="请输入姓名" />
							</uni-forms-item>
							
							<uni-forms-item name="cid">
								<template v-if="formData.role === ROLE_VOLUNTEER">
									<view class="form--label third-heading--main">身份证号</view>
								</template>
								<template v-else>
									<view class="form--label third-heading--main">身份证号/残疾人证号</view>
								</template>
								<input type="text" v-model="formData.cid" class="form--input" placeholder="请输入身份证号" />
							</uni-forms-item>
					</uni-forms>
					<button class="btn" @click="handleAttest" role="button">提交</button>
					
				</view>
				
			</view>
			<ValidateSuc v-if="role !== ROLE_UNDEFINED"></ValidateSuc>
		</view>
	</view>
</template>

<script>
	import * as UserApi from "@/api/user/user.js"
	import {checkRole,checkLogin} from "@/core/app.js"
	import {ROLE_VOLUNTEER,ROLE_BLIND,ROLE_UNDEFINED} from "@/core/constant/role.js"
	
	
	export default {
		data() {
			return {
				role:ROLE_UNDEFINED,
				formData:{
					name:"",
					cid:"",
					role:ROLE_BLIND,
				},
				rules:{
						// 对name字段进行必填验证
						name: {
							// name 字段的校验规则
							rules:[
								// 校验 name 不能为空
								{
									required: true,
									errorMessage: '请填写姓名',
								},
								// 对name字段进行长度验证
								{
									minLength: 2,
									maxLength: 5,
									errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
								},
								// 对name字段进行正则匹配：只能是中文字符
								{
									pattern:'[\\u4e00-\\u9fa5]',
									errorMessage: '姓名只能为中文字符',
								}
							],
							validateTrigger:'submit'
						},
						cid: {
							// 身份证 字段的校验规则
							rules:[
								// 校验 身份证 不能为空
								{
									required: true,
									errorMessage: '请填写身份证号',
								},
								
								// 对name字段进行正则匹配：只能是中文字符
								{
									pattern:'^[1-9]\\d{5}(19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[Xx\\d]$', 
									errorMessage: '请输入合法的身份证号',
								}
							],
							validateTrigger:'submit'
						}
				},	
				ROLE_VOLUNTEER,
				ROLE_BLIND,
				ROLE_UNDEFINED
			}
		},
		methods: {
			handleAttest(){
				if(!checkLogin()){
					this.$confirm({content:"你还没有登录"})
					return
				}
				this.$refs.form.validate().then(res=>{
								this.attest()
							})
			},
			attest(){
				const app = this
				this.$store.dispatch("user/attest",app.formData)
							.then(res => {
								const config = {
									msg: "认证成功",
									url:"pages/index/index"
								}
								this.$store.commit("user/SET_ROLE",app.formData.role)
								this.$store.dispatch("socket/openSocket")
								this.$success(config)
							})
							.catch(err => {
								console.log(err)
								this.$error(err.msg || "认证失败")
							})
			},
			
		},
		onLoad(options){
			this.formData.name = options.name
			this.role = this.$store.getters.role
		}
	}
</script>

<style scoped lang="scss">
	
	$color-black:#212529;
	$color-orange-light:#ff8d1a;
	
	@mixin border-three-rounding{
			border-radius:8px 0px 8px 8px;
			border:1px solid $color-black;
		}
	@mixin border-four-rounding{
			border-radius:8px;
			border:1px solid $color-black;
	}
	.container{
		width:100%;
		height: 100vh;
		background-color: #fff;		
		
	}
	
	.ident{
		width:85%;
		margin:auto;
		padding-top:40px;
		&--heading{
			color:$color-black;
		}
		&--role{
			padding:24px 4px;
			.role--icon-group{
				text-align: center;
				image{
					margin-left: 4px;
				}
			}
			.role--text-group{
				@include border-three-rounding;
				justify-content: center;
				padding:4px 0px;
			}
			.role--text{
				font-size: 20px;
				line-height: 1.1;
			 	padding:4px 18px;
			
				&__active-left{
					border-right: 1px solid #000;
					box-shadow: inset -8px -8px $color-orange-light;
				}
				&__active-right{
					border-left: 1px solid #000;
					box-shadow: inset 8px -8px $color-orange-light;
				}
				
			}
		}
		&--form{
			@include border-four-rounding
			padding:20px;
			margin:auto;
			
			.form--heading{
				color:$color-black;
			}
			.form--attention{
				font-size: 12px;
			}
			.form--main{
				font-size:24px;
				font-weight: 600;
				
				
			}
			.form--input{
				width:100%;
				
				font-size:14px;
				font-weight: 500;
			
				border-bottom: 1.8px solid $color-black;
				padding:4px 0px;
			}
		}
		
		.btn{
			font-size: 48upx;
			width: 300upx;
			height: 80upx;
			border-radius: 40upx;
			border: 4upx solid $color-black;
			text-align: center;
			line-height: 80upx;
			box-shadow: -20upx -20upx #ff8d1a;
			margin:auto;
		}
	
	}
	

	.line{
		width:100%;
		height:2px;
		background-color: $color-black;
		broder-radius:2px;
	}
	
	
</style>
